﻿<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	x:Class="Microsoft.ProductivityHub.SilverlightProductCarousel.CarouselItem"
	d:DesignWidth="180" d:DesignHeight="250" Width="180" Height="250">
	<UserControl.Resources>
		<Storyboard x:Name="LoadingLoop" RepeatBehavior="Forever">
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="canvas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
				<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="00:00:01.5000000" Value="360"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
		<Storyboard x:Name="ShowItem">
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.Opacity)">
				<EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</UserControl.Resources>
    <UserControl.RenderTransform>
        <TransformGroup>
            <ScaleTransform  ScaleX="1" ScaleY="1" x:Name="ItemScale"/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </UserControl.RenderTransform>


    <Grid x:Name="LayoutRoot">
		<Grid x:Name="Backstop" Margin="10,0">
			<Rectangle Fill="Transparent"/>
		</Grid>
		<Grid x:Name="Content" Margin="10,0" Width="150" MouseLeftButtonUp="MouseLeftButtonUpEvent" Cursor="Hand">
			<Grid.RowDefinitions>
				<RowDefinition Height="150"/>
				<RowDefinition Height="150"/>
			</Grid.RowDefinitions>
			<Rectangle Margin="0,-150,0,0" Grid.Row="1" Height="150" VerticalAlignment="Top" Visibility="Collapsed">
				<Rectangle.Effect>
					<DropShadowEffect Direction="90" ShadowDepth="0"/>
				</Rectangle.Effect>
				<Rectangle.Fill>
					<SolidColorBrush Color="Transparent"/>
				</Rectangle.Fill>
			</Rectangle>
			<Border HorizontalAlignment="Center" Width="135" BorderThickness="1" Margin="0" Background="Transparent" MouseEnter="MouseEnterEvent" MouseLeave="MouseLeaveEvent">
				<Border.BorderBrush>
					<SolidColorBrush Color="Transparent"/>
				</Border.BorderBrush>
                <Image x:Name="Thumbnail" Width="135" Height="129" Stretch="UniformToFill"/>
			</Border>
			<Border Width="135" BorderThickness="1" RenderTransformOrigin="0.5,0.5" Opacity="0.5" HorizontalAlignment="Center" Margin="0" Grid.Row="1" Background="White">
                <Border.OpacityMask>
					<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
						<GradientStop Color="#CC000000" Offset="1"/>
                        <GradientStop Offset="0.75"/>
					</LinearGradientBrush>
				</Border.OpacityMask>
				<Border.RenderTransform>
					<TransformGroup>
						<ScaleTransform ScaleY="-1"/>
						<SkewTransform AngleX="0" AngleY="0"/>
						<RotateTransform Angle="0"/>
						<TranslateTransform/>
					</TransformGroup>
				</Border.RenderTransform>
                <Border.BorderBrush>
					<SolidColorBrush Color="Transparent"/>
				</Border.BorderBrush>
				<Image x:Name="Reflection" Width="135" Height="129" Stretch="UniformToFill" Margin="0"/>
			</Border>
			<Grid x:Name="LoadingAnimation" Margin="0" Width="200" HorizontalAlignment="Center">
				<Canvas x:Name="canvas" Margin="0" Opacity="0.5" RenderTransformOrigin="0.5,0.5" Width="55" Height="55">
					<Canvas.RenderTransform>
						<TransformGroup>
							<ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
							<SkewTransform/>
							<RotateTransform/>
							<TranslateTransform/>
						</TransformGroup>
					</Canvas.RenderTransform>
					<Ellipse Stretch="Fill" Height="10" Width="10" Canvas.Left="23">
						<Ellipse.Fill>
							<SolidColorBrush Color="{StaticResource Gray_666}"/>
						</Ellipse.Fill>
					</Ellipse>
					<Ellipse Stretch="Fill" Height="10" Width="10" Canvas.Left="35" Canvas.Top="3" RenderTransformOrigin="0.5,0.5" Opacity="0.45">
						<Ellipse.Fill>
							<SolidColorBrush Color="{StaticResource Gray_666}"/>
						</Ellipse.Fill>
						<Ellipse.RenderTransform>
							<TransformGroup>
								<ScaleTransform ScaleX="0.67" ScaleY="0.67"/>
								<SkewTransform/>
								<RotateTransform/>
								<TranslateTransform/>
							</TransformGroup>
						</Ellipse.RenderTransform>
					</Ellipse>
					<Ellipse Stretch="Fill" Height="10" Width="10" Canvas.Left="44" Canvas.Top="12" RenderTransformOrigin="0.5,0.5" Opacity="0.5">
						<Ellipse.Fill>
							<SolidColorBrush Color="{StaticResource Gray_666}"/>
						</Ellipse.Fill>
						<Ellipse.RenderTransform>
							<TransformGroup>
								<ScaleTransform ScaleX="0.7" ScaleY="0.7"/>
								<SkewTransform/>
								<RotateTransform/>
								<TranslateTransform/>
							</TransformGroup>
						</Ellipse.RenderTransform>
					</Ellipse>
					<Ellipse Stretch="Fill" Height="10" Width="10" Canvas.Left="47" Canvas.Top="23" RenderTransformOrigin="0.5,0.5" Opacity="0.55">
						<Ellipse.Fill>
							<SolidColorBrush Color="{StaticResource Gray_666}"/>
						</Ellipse.Fill>
						<Ellipse.RenderTransform>
							<TransformGroup>
								<ScaleTransform ScaleX="0.73" ScaleY="0.73"/>
								<SkewTransform/>
								<RotateTransform/>
								<TranslateTransform/>
							</TransformGroup>
						</Ellipse.RenderTransform>
					</Ellipse>
					<Ellipse Stretch="Fill" Height="10" Width="10" Canvas.Left="44" Canvas.Top="35" RenderTransformOrigin="0.5,0.5" Opacity="0.6">
						<Ellipse.Fill>
							<SolidColorBrush Color="{StaticResource Gray_666}"/>
						</Ellipse.Fill>
						<Ellipse.RenderTransform>
							<TransformGroup>
								<ScaleTransform ScaleX="0.76" ScaleY="0.76"/>
								<SkewTransform/>
								<RotateTransform/>
								<TranslateTransform/>
							</TransformGroup>
						</Ellipse.RenderTransform>
					</Ellipse>
					<Ellipse Stretch="Fill" Height="10" Width="10" Canvas.Left="35" Canvas.Top="43" RenderTransformOrigin="0.5,0.5" Opacity="0.65">
						<Ellipse.Fill>
							<SolidColorBrush Color="{StaticResource Gray_666}"/>
						</Ellipse.Fill>
						<Ellipse.RenderTransform>
							<TransformGroup>
								<ScaleTransform ScaleX="0.79" ScaleY="0.79"/>
								<SkewTransform/>
								<RotateTransform/>
								<TranslateTransform/>
							</TransformGroup>
						</Ellipse.RenderTransform>
					</Ellipse>
					<Ellipse Stretch="Fill" Height="10" Width="10" Canvas.Left="23" Canvas.Top="46" RenderTransformOrigin="0.5,0.5" Opacity="0.7">
						<Ellipse.Fill>
							<SolidColorBrush Color="{StaticResource Gray_666}"/>
						</Ellipse.Fill>
						<Ellipse.RenderTransform>
							<TransformGroup>
								<ScaleTransform ScaleX="0.82" ScaleY="0.82"/>
								<SkewTransform/>
								<RotateTransform/>
								<TranslateTransform/>
							</TransformGroup>
						</Ellipse.RenderTransform>
					</Ellipse>
					<Ellipse Stretch="Fill" Height="10" Width="10" Canvas.Left="12" Canvas.Top="43" RenderTransformOrigin="0.5,0.5" Opacity="0.75">
						<Ellipse.Fill>
							<SolidColorBrush Color="{StaticResource Gray_666}"/>
						</Ellipse.Fill>
						<Ellipse.RenderTransform>
							<TransformGroup>
								<ScaleTransform ScaleX="0.85" ScaleY="0.85"/>
								<SkewTransform/>
								<RotateTransform/>
								<TranslateTransform/>
							</TransformGroup>
						</Ellipse.RenderTransform>
					</Ellipse>
					<Ellipse Stretch="Fill" Height="10" Width="10" Canvas.Left="3" Canvas.Top="35" RenderTransformOrigin="0.5,0.5" Opacity="0.8">
						<Ellipse.Fill>
							<SolidColorBrush Color="{StaticResource Gray_666}"/>
						</Ellipse.Fill>
						<Ellipse.RenderTransform>
							<TransformGroup>
								<ScaleTransform ScaleX="0.88" ScaleY="0.88"/>
								<SkewTransform/>
								<RotateTransform/>
								<TranslateTransform/>
							</TransformGroup>
						</Ellipse.RenderTransform>
					</Ellipse>
					<Ellipse Stretch="Fill" Height="10" Width="10" Canvas.Top="23" RenderTransformOrigin="0.5,0.5" Opacity="0.85">
						<Ellipse.Fill>
							<SolidColorBrush Color="{StaticResource Gray_666}"/>
						</Ellipse.Fill>
						<Ellipse.RenderTransform>
							<TransformGroup>
								<ScaleTransform ScaleX="0.91" ScaleY="0.91"/>
								<SkewTransform/>
								<RotateTransform/>
								<TranslateTransform/>
							</TransformGroup>
						</Ellipse.RenderTransform>
					</Ellipse>
					<Ellipse Stretch="Fill" Height="10" Width="10" Canvas.Left="3" Canvas.Top="12" RenderTransformOrigin="0.5,0.5" Opacity="0.9">
						<Ellipse.Fill>
							<SolidColorBrush Color="{StaticResource Gray_666}"/>
						</Ellipse.Fill>
						<Ellipse.RenderTransform>
							<TransformGroup>
								<ScaleTransform ScaleX="0.94" ScaleY="0.94"/>
								<SkewTransform/>
								<RotateTransform/>
								<TranslateTransform/>
							</TransformGroup>
						</Ellipse.RenderTransform>
					</Ellipse>
					<Ellipse Stretch="Fill" Height="10" Width="10" Canvas.Left="12" Canvas.Top="3" RenderTransformOrigin="0.5,0.5" Opacity="0.95">
						<Ellipse.Fill>
							<SolidColorBrush Color="{StaticResource Gray_666}"/>
						</Ellipse.Fill>
						<Ellipse.RenderTransform>
							<TransformGroup>
								<ScaleTransform ScaleX="0.97" ScaleY="0.97"/>
								<SkewTransform/>
								<RotateTransform/>
								<TranslateTransform/>
							</TransformGroup>
						</Ellipse.RenderTransform>
					</Ellipse>
				</Canvas>
			</Grid>
		</Grid>
	</Grid>
</UserControl>